<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model="listQuery.nickname"
        clearable
        placeholder="请输入用户昵称"
      />
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model="listQuery.registerChannel"
        clearable
        filterable
        placeholder="请选择注册渠道"
      >
        <el-option
          v-for="option in channelOptions"
          :key="option.channelName"
          :label="option.channelName"
          :value="option.channelName"
        />
      </el-select>

      <el-select
        v-model="listQuery.payChannel"
        clearable
        filterable
        placeholder="支付渠道"
      >
        <el-option
          v-for="option in payOptions"
          :key="option.payment"
          :label="option.name"
          :value="option.payment"
        />
      </el-select>

      <el-select
        v-model="listQuery.rechargeName"
        clearable
        filterable
        placeholder="计费点"
      >
        <el-option
          v-for="option in chargeOptions"
          :key="option.rechargeName"
          :label="option.rechargeName"
          :value="option.rechargeName"
        />
      </el-select>

      <el-select v-model="listQuery.payStatus" filterable clearable placeholder="支付状态">
        <el-option
          v-for="option in statusOptions"
          :key="option.status"
          :label="option.name"
          :value="option.status"
        />
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetQuery()"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportExcel('#WashAway-out-table', '充值订单')"
      >导出</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        id="WashAway-out-table"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="userId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickName" />

        <el-table-column align="center" label="注册渠道">
          <template slot-scope="{ row }">{{ row.registerChannel }}</template>
        </el-table-column>
        <el-table-column align="center" label="充值金额">
          <template slot-scope="{ row }">{{ row.amount }}</template>
        </el-table-column>

        <el-table-column align="center" label="计费点">
          <template slot-scope="{ row }">{{ row.rechargeName }}</template>
        </el-table-column>

        <el-table-column align="center" label="订单创建时间" min-width="140">
          <template slot-scope="{ row }">{{ row.orderCreateTime | parseTime }}</template>
        </el-table-column>

        <el-table-column align="center" label="我方订单编号">
          <template slot-scope="{ row }">{{ row.orderId }}</template>
        </el-table-column>

        <el-table-column align="center" label="对方订单编号">
          <template slot-scope="{ row }">{{ row.tradeNo }}</template>
        </el-table-column>

        <el-table-column align="center" label="支付渠道">
          <template slot-scope="{ row }">{{
            payOptions[row.payChannelType] &&
            payOptions[row.payChannelType].name
            }}</template>
        </el-table-column>

        <el-table-column align="center" label="订单支付时间" min-width="140">
          <template slot-scope="{ row }">{{ row.orderPayTime | parseTime }}</template>
        </el-table-column>

        <el-table-column align="center" label="支付状态">
          <template slot-scope="{ row }">{{
            statusOptions[row.payStatus] && statusOptions[row.payStatus].name
            }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import {
    xhrPayOrderList,
    xhrChargeUnitList,
    xhrChannelList
  } from '@/api/account'
  import { getCountryItem } from '@/filters'
  export default {
    name: 'PayOrderList',
    components: { TablePagination },
    data() {
      return {
        list: null,
        total: 0,
        daterangeValue: '',
        listQuery: {
          page: 1,
          limit: 100,
          startTime: null,
          endTime: null,
          nickname: null,
          userId: (this.$route.query && this.$route.query.userId) || null,
          rechargeId: null,
          rechargeName: null,
          rechargeType: null, // this.chargeOptions[rechargeId-1].rechargeType
          payChannel: null,
          registerChannel: null,
          payStatus: null
        },
        listLoading: true,
        dialogVisible: false,
        forbidAccounts: '',
        channelOptions: null,
        // 支付渠道
        payOptions: [
          { payment: 0, name: '微信' },
          { payment: 1, name: '支付宝' },
          { payment: 2, name: 'AppStore' },
          { payment: 3, name: '现在支付-支付宝' },
          { payment: 4, name: '现在支付-微信' },
          { payment: 5, name: '微信公众号支付'}
        ],
        // 计费点
        chargeOptions: null,
        // 支付状态
        statusOptions: [
          { status: 0, name: '已创建' },
          { status: 1, name: '已付款' },
          { status: 2, name: '已取消' }
        ],
        countryCodeItem: getCountryItem()
      }
    },
    created() {
      this.getChargeUnit()
      xhrChannelList()
        .then(resp => {
          this.channelOptions = resp.data.list
        })
        .catch(err => {
          this.$message.error(err)
        })
      this.doSearch()
    },
    methods: {
      getChargeUnit() {
        xhrChargeUnitList()
          .then(resp => {
            this.chargeOptions = resp.data
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      doSearch() {
        if (this.listQuery.userId && !/^\d*$/.test(this.listQuery.userId)) {
          this.$message.warning('用户ID只能是数字')
          this.listLoading = false
          return
        }
        if (this.listQuery.rechargeName !== null) {
          // this.listQuery.rechargeType = this.chargeOptions[this.listQuery.rechargeId - 1].rechargeType
          this.chargeOptions.forEach((item, index) => {
            if (item.rechargeName === this.listQuery.rechargeName) {
              this.listQuery.rechargeType = item.rechargeType
              this.listQuery.rechargeId = item.rechargeId
            }
          })
        }
        xhrPayOrderList(this.listQuery)
          .then(resp => {
            this.list = resp.data.rechargeOrderList
            this.total = resp.data.total
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
          .finally(() => {
            this.listLoading = false
          })
      },
      exportFile() {
        const header = {
          userId: '用户ID',
          nickName: '用户昵称',
          registerChannel: '注册渠道',
          amount: '充值金额',
          rechargeName: '计费点',
          orderCreateTime: '订单创建时间',
          orderId: '我方订单编号',
          tradeNo: '对方订单编号',
          payChannelType: '支付渠道',
          orderPayTime: '订单支付时间',
          payStatus: '支付状态'
        }
        const data = this.formatJson(Object.keys(header), this.list)
        import('@/vendor/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header: Object.values(header), // 表头 必填
            data, // 具体数据 必填
            filename: 'order', // 非必填
            bookType: 'csv'
          })
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'payChannelType') {
            return this.payOptions[v[j]] && this.payOptions[v[j]].name
          } else if (j === 'payStatus') {
            return this.statusOptions[v[j]] && this.statusOptions[v[j]].name
          } else {
            return v[j]
          }
        }))
      },
      resetQuery() {
        this.listQuery = {
          page: 1,
          limit: 100,
          startTime: null,
          endTime: null,
          nickname: null,
          userId: null,
          rechargeId: null,
          rechargeName: null,
          rechargeType: null, // this.chargeOptions[rechargeId-1].rechargeType
          payChannel: null,
          registerChannel: null,
          payStatus: null
        }
        this.doSearch()
      }
    }
  }
</script>
